<html>
  <head>
    <style type="text/css">
    #dhtml_holder {
      width: 800px;
      height: 800px;
      border-color: black;
      border-width: 1px;
      border-style: solid;
      background-color: grey;
    }
    </style>
  </head>

  <body>
    <p>
      Click to import your address book from one of the providers below:
      <a href='#service=yahoo'       onclick="init_display(); return open_popup('yahoo');">Yahoo!</a>
      <a href='#service=windowslive' onclick="init_display(); return open_popup('windowslive')">Windows Live</a>
      <a href='#service=gmail'       onclick="init_display(); return open_popup('gmail')">Gmail</a>
      <a href='#service=aol'         onclick="init_display(); input_service='aol'; $('#u_p_inputs').show(); return false;">AOL</a>
      <a href='#service=plaxo'       onclick="init_display(); input_service='plaxo'; $('#u_p_inputs').show(); return false;">Plaxo</a>
      <a href='#service=outlook'     onclick="init_display(); return open_popup('outlook')">Outlook</a>
      <a href='#service=addressbook' onclick="init_display(); return open_popup('addressbook')">Mac Address Book</a>
    </p>
    <p id="u_p_inputs" style="display:none;">
      Username: <input type='text' id='username'/><br />
      Password: <input type='password' id='password'/><br />
      <input type='submit' onclick="return open_popup(input_service, false, $('#username').val(), $('#password').val());" name='submit'/>
    </p>
    
    <div id="dhtml_holder" style="display:none;">&nbsp;</div>

    
    <!-- // required include for the CloudSponge.com JavaScript Library -->
    <script type="text/javascript" src='jquery-1.4.2.min.js'></script>

    <!-- // include the CloudSponge.com JavaScript Library -->
    <script type="text/javascript" src='csimport.js'></script>

    <!-- // Define constants for the CloudSponge.com JavaScript Library -->
    <script type="text/javascript">
    // Change these values to match your domain key and password for CloudSponge.com!
    DOMAIN_KEY = 'CHANGEME';
    DOMAIN_PASSWORD = 'CHANGEME';
    </script>

    <!-- // not required include for the CloudSponge.com JavaScript Library, but useful for debugging, used in this file to display events -->
    <script type="text/javascript" src='jquery.json-2.2.min.js'></script>



    <script type="text/javascript">
      function init_display() {
        $('#dhtml_holder').text('');
        $('#dhtml_holder').hide();
      }
      
      // Callback defined to handle events as they are returned.
      function update_event(event) {
        // alert('Event: ' + $.toJSON(event));
        $('#dhtml_holder').append('<p>' + $.toJSON(event) + '</p>');
        $('#dhtml_holder').show();
      }
      // Callback to update with the contacts array
      function update_contacts(json) {
        var results;
        var contacts = json['contacts'];
        var owner = json['contacts_owner'];
        if (owner && owner['email'] && owner['email'][0]) {
          owner_data = $('<p><strong>Contacts Owner:</strong> '+owner['first_name']+' '+owner['last_name']+' &lt;'+owner['email'][0]['address']+'&gt;</p>');
          $('#dhtml_holder').append(owner_data);
        }
        
        if (!contacts['error'])
        {
          results = $('<table></table>');
          $.each(contacts, 
            function(i){
              contact = this;
              row = $('<tr></tr>');
              row_name = $('<td class="name"></td>').text(contact['first_name'] + ' ' + contact['last_name']);
              row_email = $('<td class="email"></td>');
              if (contact['email']) {
                $.each( contact['email'], function(j) {
                  row_email.append(this['address']); 
                  if (this['type']) { 
                    row_email.append(' (' + this['type'] + ')');
                  }
                });
              }
              if (contact['phone']) {
                $.each( contact['phone'], function(j) {
                  row_email.append(this['number']); 
                  if (this['type']) { 
                    row_email.append(' (' + this['type'] + ')');
                  }
                });
              }
              results.append(row.append(row_name).append(row_email));
            }
          );
        } else {
          results = $('<p>' + contacts['error'] + '</p>');
        }
        $('#dhtml_holder').append(results);
        // $(document.createElement('table')).appendTo('#dhtml_holder').find('table').end();
        // $('#dhtml_holder').append('<pre>'+$.toJSON(contacts)+'</pre>');
        $('#dhtml_holder').show('slow');
      }
    </script>
    
  </body>
</html>